<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login">
    <!-- 顶部 -->
    <van-nav-bar
      title="面经登录"
      left-text="返回"
      right-text="取消"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      class="transparent-nav"
    />

    <!-- 登录表单 -->
    <div class="form-container">
      <van-form ref="formRef" @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="rules.username"
          class="glass-input"
          autocomplete="username"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="rules.password"
          class="glass-input"
          autocomplete="current-password"
        />
        <div style="margin: 32px 16px 16px">
          <van-button
            block
            type="primary"
            native-type="submit"
            class="gradient-button"
          >
            立即登录
          </van-button>
        </div>
        <div class="switch-link">
          <router-link to="/register">
            <span>还没有账号？</span>
            <span class="highlight">立即注册</span>
          </router-link>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { showSuccessToast, showFailToast } from 'vant';
const formRef=ref(null)
const username=ref('')
const password=ref('')
const router = useRouter();
const userStore = useUserStore();
const rules=reactive( {
        username: [

          { required: true, message: '请填写用户名' },
          { min: 5, max: 12, message: '长度在 5到 12 个字符' }
        ],
        password: [
          { required: true, message: '请填写密码' },
          { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码必须为6-20位字母或数字' }
        ]
}
)
const onClickLeft = () => {
  router.back();
};
const onClickRight = () => {
  router.back();
};
const onSubmit = async () => { 
    try { 
        await formRef.value.validate()

        const LoginResult = await userStore.LoginPinia({
            username: username.value,
            password: password.value
        })
        if (LoginResult.success) {
            showSuccessToast('登录成功')
            router.push('/home')
        } else {
            showFailToast(LoginResult.data?.message||'登录失败')
        }
    }catch (error) { 
        showFailToast(error.message||'登录失败')
    }

};
</script>

<style scoped lang="scss">
.login {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/karina2.png') center/cover no-repeat;
    position: relative;
    overflow: hidden;
  
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        135deg,
        rgba(135, 206, 235, 0.15) 0%,
        rgba(176, 224, 230, 0.1) 25%,
        rgba(255, 182, 193, 0.08) 50%,
        rgba(221, 160, 221, 0.12) 75%,
        rgba(255, 218, 185, 0.1) 100%
      );
      backdrop-filter: blur(1px);
    }
  
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
        radial-gradient(
          circle at 20% 30%,
          rgba(255, 255, 255, 0.12) 0%,
          transparent 60%
        ),
        radial-gradient(
          circle at 80% 70%,
          rgba(255, 255, 255, 0.08) 0%,
          transparent 50%
        );
    }
  }
  
  .transparent-nav {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(1px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
    :deep(.van-nav-bar__title),
    :deep(.van-nav-bar__text),
    :deep(.van-icon) {
      color: rgba(255, 255, 255, 0.9) !important;
    }
  }
  
  .form-container {
    position: relative;
    z-index: 10;
    margin: 20vh 20px 0;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .glass-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    margin-bottom: 16px;
    backdrop-filter: blur(1px);
    transition: all 0.3s ease;
  
    &:focus-within {
      background: rgba(255, 255, 255, 0.15) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }
  
    :deep(.van-field__label),
    :deep(.van-field__control) {
      color: rgba(255, 255, 255, 0.9) !important;
    }
  
    :deep(.van-field__control::placeholder) {
      color: rgba(255, 255, 255, 0.6) !important;
    }
  }
  
  .gradient-button {
    background: linear-gradient(
      135deg,
      rgba(255, 229, 153, 0.8) 0%,
      rgba(255, 242, 204, 0.8) 100%
    ) !important;
    border: none !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 229, 153, 0.3);
    transition: all 0.3s ease;
  
    &:active {
      transform: translateY(2px);
      box-shadow: 0 2px 10px rgba(255, 229, 153, 0.4);
    }
  }
  
  .switch-link {
    text-align: center;
    margin-top: 20px;
  
    a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 14px;
      transition: all 0.3s ease;
    }
  
    .highlight {
      color: rgba(255, 229, 153, 0.9);
      font-weight: 600;
      margin-left: 4px;
    }
  
    &:hover {
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
  }
</style>
